<template>
  <mu-appbar class="header" color="primary">
    <mu-button slot="left" icon @click="$router.push('/')">
      <mu-icon value="menu"></mu-icon>
    </mu-button>
    <span>智力方舟题库系统</span>
    <span slot="right">欢迎你，{{ isLoggedIn ? userInfo.fullname : '游客' }}</span>
    <mu-menu slot="right">
      <mu-button flat @click="handleAuth()">{{ isLoggedIn ? '登出' : '登录' }}</mu-button>
    </mu-menu>
    <!-- <mu-menu slot="right">
      <mu-button flat>MENU</mu-button>
      <mu-list slot="content">
        <mu-list-item button>
          <mu-list-item-content>
            <mu-list-item-title>Menu Item 1</mu-list-item-title>
          </mu-list-item-content>
        </mu-list-item>
        <mu-list-item button>
          <mu-list-item-content>
            <mu-list-item-title>Menu Item 2</mu-list-item-title>
          </mu-list-item-content>
        </mu-list-item>
      </mu-list>
    </mu-menu> -->
  </mu-appbar>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'AppHeader',
  computed: {
    ...mapGetters({
      userInfo: 'auth/userInfo'
    }),
    isLoggedIn() {
      return this.userInfo !== null
    }
  },
  methods: {
    ...mapActions({
      logout: 'auth/logout'
    }),
    async handleAuth() {
      if (this.isLoggedIn) {
        try {
          await this.logout()
          this.$toast.success('登出成功')
          this.$router.push({ name: 'Home' })
        } catch (err) {
          this.$report(err)
        }
      } else {
        this.$router.push({ name: 'Login' })
      }
    }
  }
}
</script>

<style>
.header {
  width: 100%;
}
</style>
